<style scoped lang="scss">
// 图片裁剪组件样式（ImageCropper.scss）
@import "@/styles/_variables.scss"; // 假设包含基础变量
@import "@/styles/_mixins.scss"; // 假设包含flex等混合宏

// 裁剪组件容器（占满全屏）
.image-cropper-container {
  width: 100%;
  height: 100vh; // 占满视口高度
  background-color: #000; // 深色背景突出图片
  color: $color-white;
  overflow: hidden;
  position: relative;
}

// 头部区域（标题+关闭按钮）
.cropper-header {
  width: 100%;
  height: 1.2rem; // 固定高度
  @include flex-space-between-center;
  padding: 0 0.4rem;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

  .cropper-title {
    font-size: 0.48rem;
    font-weight: 500;
  }

  .cropper-close {
    width: 0.6rem;
    height: 0.6rem;
    @include flex-center;
    font-size: 0.5rem;
    color: $color-white;
    cursor: pointer;

    &:active {
      opacity: 0.7;
    }
  }
}

// 裁剪预览区（占满剩余高度）
.cropper-preview {
  width: 100%;
  height: calc(100vh - 1.2rem - 1.5rem); // 减去头部和底部按钮高度
  @include flex-center;
  position: relative;
  overflow: hidden;

  // 图片容器（保持图片比例）
  .cropper-image-wrapper {
    max-width: 100%;
    max-height: 100%;
    position: relative;

    img {
      width: 100%;
      height: 100%;
      object-fit: contain; // 保持图片比例，不拉伸
    }

    // 裁剪框（虚线框示意）
    .cropper-box {
      position: absolute;
      border: 2px dashed $color-primary; // 主色虚线
      box-sizing: border-box;
      // 初始裁剪框大小（可通过JS动态调整）
      width: 6rem;
      height: 6rem;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    // 裁剪框外的遮罩（半透明黑色）
    .cropper-mask {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5);
      // 中间镂空区域（通过JS动态计算裁剪框位置生成）
      mask: radial-gradient(circle, transparent 6rem, black 6rem);
      -webkit-mask: radial-gradient(circle, transparent 6rem, black 6rem);
    }
  }
}

// 底部操作按钮区
.cropper-footer {
  width: 100%;
  height: 1.5rem; // 固定高度
  @include flex-space-around-center;
  padding: 0 0.6rem;
  box-sizing: border-box;
  border-top: 1px solid rgba(255, 255, 255, 0.1);

  .cropper-btn {
    width: 3.5rem;
    height: 0.9333rem;
    @include flex-center;
    border-radius: 0.4667rem;
    font-size: 0.4267rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;

    &:active {
      transform: scale(0.98);
    }
  }

  // 取消按钮
  .cropper-btn-cancel {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: $color-white;
  }

  // 确认按钮
  .cropper-btn-confirm {
    background-color: $color-primary; // 主色背景
    color: $color-white;
    border: none;
  }
}

// 裁剪控制提示（可选）
.cropper-tip {
  position: absolute;
  top: 1.4rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.3467rem;
  color: rgba(255, 255, 255, 0.7);
  padding: 0.2rem 0.4rem;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 0.2rem;
}
</style>
<template>
  <div class="image-cropper" v-if="isShow">
    <img :src="imageUrl" alt="待裁剪图片" />
  </div>
</template>
<script>
export default {
  props: {
    imageUrl: {
      type: String,
      default: ''
    },
    isShow: {
      type: Boolean,
      default: false
    }
  }
}
</script>